<script setup>
import { ref, computed } from 'vue';
import Nav_bottom from "../../components/navigation/bottom/nav_bottom.vue";
import {

  goCommunityAnnouncement,
  goPartyBuilding,
  goelectionRankings,
  gocomplaints,
  gohousekeeping,
  goNeigh, goHousehol,
  goGroupBuying
} from "../../tools/go";

/**
 *
 *
 * 1.合：各位评委老师好，
 * 候：我们是N号比赛团队，我们的比赛项目是智慧社区APP开发与应用，主题是：
 * 合：智在社区，惠享生活。
 * 候：我是团队的项目经理兼后端开发工程师，
 * 侯：接下来，请我的同事回到工位，由我介绍比赛项目。
 *
 * （翻）2：侯：我将项目背景、总体思路、开发流程、主要成果、项目创新、未来展望六个方面进行介绍。
 *
 * （翻）3：侯：  1项目背景
 *
 * （翻）4.侯：“十四五”城乡社区服务体系建设规划中指出：要加快社区服务数字化建设，鼓励多方参与建设开发智慧社区信息系统，深化社区治理信息系统的应用，其次，当下社区治理存在以下痛点，一，社区管理效率低；二、居民对便捷生活的要求越来越高；三、社区资源分散；四、社区多元化发展需求；五、物联网技术的发展，促使社区需要智能化的管理模式。
 *
 * （翻）5：     2基于以上背景，我们得出项目总体思路：
 *
 * （翻）6：一、明确需求与目标，APP致力于为社区居民打造便捷、和谐的智慧生活圈，为物业管理人员提供智能化的管理工具，为社区管理员提供高效的管理平台，。
 *
 * （翻）7.二、由此我们确定了开发团队，分别由项目经理、UI设计师、前端开发工程师、后端开发工程师组成，团队协同开发，各司其职，确保项目按时、高质量交付。
 *
 * （翻）8.三、确定技术架构，项目的开发模式基于前、后端分离式架构。使得前后端可以独立开发，专注各自的业务，提升应用的健壮性。除此之外，我们还使用Git进行代码合并操作，提升项目开发效率。
 *
 * （翻）9.      3.开发流程。
 *
 * （翻）10.项目整体开发流程为功能需求设计、UI原型设计、前端开发、数据库设计、后端开发、测试优化、打包部署、编写操作文档，完成APP制作。
 * 接下来，我将详细展示具体开发流程。
 *
 * （翻）11.  一，功能需求设计，结合需求与目标、深度融合绿色低碳理念、社区治理创新、可持续发展理念，团队进行功能细节规划，确定首页等底部导航栏，访客邀请等核心功能，并绘制以上功能需求设计图。
 *
 * （翻）12我们立足行业前沿，严格按照行业和岗位标准进行操作。
 * 接下来，有请UI设计师进行操作展示。
 *
 * 侯：（翻）20收到！我是后端开发工程师，接到前端请求，现在马上编写接口给前端调用，并把处理结果数据返回给前端。
 *
 * （翻）21我先给大家展示一下我们系统的接口文档，根据控制器类级分类接口，处理前端增删查改和分析处理的业务。我以贴子模块为例，讲解下获取已公布帖子列表接口，首先文档这里是关于接口的描述、请求参数、响应状态、响应参数及响应示例，即返回前端的数据样式。调试这里可以直接测试我们的接口，现在我输入一下接口参数，点击发送，则可得到接口的响应数据。Script这里可以直接看到前端调用接口的示例。
 *
 * （翻）22现在由我来编写上传视频请求的接口函数。在控制器定义一个函数，（写函数定义代码）函数的参数有用户ID，帖子ID，视频文件hash，视频块hash，原始文件名，视频块索引，视频。（写函数参数代码）函数的逻辑是判断视频块不为“完结”时，就是视频没传完，则将接收到的文件块存储在缓存文件夹中，并记录文件块的索引信息，如文件块编号、hash 值。（写没传完的代码）如“完结”时，说明上传完毕，后端从缓存文件夹中按顺序加载该大文件的所有文件块，进行合并视频文件，删除视频块文件，并返回视频地址。（写完结合并的代码）合并完成后，后端计算合并后大文件的 hash 值，并与前端传来的文件 hash 值进行对比。若哈希值一致，后端向前端返回合并完成消息；若不一致，则返回合并错误消息，提示前端重新上传文件或进行相应处理。（写返回前端的代码）我的接口编写完毕，现在接口文档里已经自动生成出这个上传视频的接口，前端可根据接口文档的示例来调用。现在由我们前端开发工程师来操作调用后端接口：
 *
 * 陈：收到！现在由我来调用后端封装的请求函数，在后端提供的接口文档查看函数调用示例，编写自己的请求函数代码。（编写调用接口代码）调用时参数需要传值正确。执行一次请求之后，根据接口返回数据的索引从数组中取出未上传的文件块，生成文件块的 hash 值，将 hash 值与文件块一起发送至后端。判断结果数据，是否上传完所有的视频文件块，如果没上传完，则继续调用发送请求。（编写没传完的代码）若传输完毕，则向后端发送合并请求。使用定时器来执行请求函数，隔1秒执行一次。弹窗提示用户是否上传成功。（编写传完的代码）
 * 代码编写完毕，现在演示上传视频的操作。选择视频文件，点击上传视频文件图标，上传文件，可以通过上传进度条看到上传进度。我的演示完毕，请后端开发工程师继续介绍。
 *
 * 侯：（翻）23收到！我们的项目基于 Spring Boot 框架搭建整个后端，能够快速独立运行生产级别的应用。项目还整合了 MyBatis Plus，实现数据交互，显著减少了操作数据库的代码量。使用单体架构模式在开发过程中，模块之间的调用是通过函数调用，开发人员可以在同一个项目中进行调试，无需运行多个服务，提高了开发和调试的效率。
 *
 * （翻）24（陈协助打开数据库）
 * 除此之外，我还负责我们项目的数据库设计，请我的同事打开数据库同步展示，我们使用MySQL关系型数据库和Redis缓存数据库。还使用了Navicat数据库管理工具。
 *
 * （翻）25在最后，我们对系统功能持续测试与优化，并且为用户编写了产品操作手册，方便用户使用。
 *
 * （翻）26 四、基于以上，我们取得了以下的主要成果。
 *
 * （翻）27一、社区居民，便利性成果，一站式服务平台，居民生活服务满意度提升；二、小区物业管理，运维智能化成果，优化资源配置效率，减少人工干预，降低管理成本。三、社区管理，社区治理水平提升成果，O2O服务生态，社区团购订单量提高，促进社区经济发展。
 *
 * （翻）28我们的项目还做了以下创新（陈点进AI助手，提前输入问题，讲技术创新时，按回车，AI思考........
 * ）
 * （翻）29一，模式创新，突破传统的服务模式，打造“线上、线下”闭环服务体系；  二、社会价值，APP的使用，推动智慧城市建设、提升社区居民幸福指数； 三、技术创新，深度融合ai等前沿技术，精准用户需求。
 * 接下来我来模拟普通用户对AI提问：糖醋排骨怎么做？（陈：点击确认，ai正在加载）现在我们可以看到AI正在加载，这时候前端在与后端搭建sse协议进行连接，当连接完成模型开始思考，模型基于deepseek-r1实现深度思考功能，做出模型，思考出最正确的回答，集成LLM聊天语言大模型，足以解决普通用户知识科普类型的提问。（陈：提前输入“帮我发一个因为建筑施工，明天停水一天的公告”，点击确认）我们的ai模型还可以解决管理员用户的日常需求，这主要是利用了langchian架构实现模型沟通，交流策略，分别是意图识别模型、需求实现模型，利用大数据推理出用户角色，判断是否拥有对应的动作权限，前端根据模型事件的不同，做出不同的决策，实现不同的效果。展示完毕。
 * （翻）30未来展望，
 * （翻）31我们将对智慧社区APP持续优化，开发AI社区管家功能，成为居民的生活助手，开发智能家居功能，实现社区居民“由外到内”的智能化便捷生活方式；开发人工智能与大数据深度融合，让社区“会思考”，通过对社区居民的大数据等进行分析，提供个性化推送。
 *
 *
 * （翻）32我们的展示到此结束，整理工位，
 * 陈，胡：收到，整理完毕！
 * 候：感谢评委老师聆听！（一起鞠躬）
 * @type {Ref<UnwrapRef<[{icon: string, id: string, title: string},{icon: string, id: string, title: string},{icon: string, id: string, title: string},{icon: string, id: string, title: string},{icon: string, id: string, title: string},null,null,null,null]>, UnwrapRef<[{icon: string, id: string, title: string},{icon: string, id: string, title: string},{icon: string, id: string, title: string},{icon: string, id: string, title: string},{icon: string, id: string, title: string},null,null,null,null]> | [{icon: string, id: string, title: string},{icon: string, id: string, title: string},{icon: string, id: string, title: string},{icon: string, id: string, title: string},{icon: string, id: string, title: string},null,null,null,null]>}
 */
// 左侧菜单项
const menuItems = ref([
  { id: '1', title: '社区服务', icon: './static/img/indeximg/kjfs/TX.png' },
  { id: '2', title: '社区生活', icon: './static/img/indeximg/kjfs/TX.png' },
  { id: '3', title: '社区商业', icon: './static/img/indeximg/kjfs/TX.png' },
  { id: '4', title: '政务服务', icon: './static/img/indeximg/kjfs/TX.png' },
  { id: '5', title: '环保服务', icon: './static/img/indeximg/kjfs/TX.png' },
  { id: '6', title: '金融服务', icon: './static/img/indeximg/kjfs/TX.png' },
  { id: '7', title: '医疗健康', icon: './static/img/indeximg/kjfs/TX.png' },
  { id: '8', title: '教育培训', icon: './static/img/indeximg/kjfs/TX.png' },
  { id: '9', title: '更多服务', icon: './static/img/indeximg/kjfs/TX.png' },
]);

// 社区服务列表数据
const list = ref([
{ id: '1', title: '户籍管理', icon: './static/img/server/a/controlofdomicile.png', action: goHousehol },
{ id: '2', title: '社区公告', icon: './static/img/server/a/CommunityAnnouncement.png', action: goCommunityAnnouncement },
{ id: '3', title: '党建服务', icon: './static/img/server/a/djfw.png', action: goPartyBuilding },
{ id: '4', title: '选举投票', icon: './static/img/server/a/poll.png', action:goelectionRankings},
{ id: '5', title: '投诉建议', icon: './static/img/server/a/Complaintsandsuggestions.png', action: gocomplaints }
]);

// 物业服务列表数据
const qulist = ref([
{ id: '1', title: '社区医疗', icon: './static/img/server/a/Communityhealthcare.png',  },
{ id: '2', title: '健康养老', icon: './static/img/server/a/Healthyretirement.png',  },
{ id: '3', title: '社区教育', icon: './static/img/server/a/communityeducation.png',  },
{ id: '4', title: '社区活动', icon: './static/img/server/a/Communityactivities.png', action:goNeigh },
{ id: '5', title: '社区互助', icon: './static/img/server/a/CommunityMutualAid.png',  },
// 绿色出行不用
 { id: '6', title: '绿色出行', icon: './static/img/server/a/Greentravel.png '},
{ id: '7', title: '家政服务', icon: './static/img/server/a/domesticservice.png',  action:gohousekeeping},
{ id: '8', title: '闲置回收', icon: './static/img/server/a/Idlerecycling.png',  }
]);

// 便民服务列表数据
const st = ref([
{ id: '1', title: '社区就业', icon: './static/img/server/a/communityemployment.png',  },
{ id: '2', title: '社区团购', icon: './static/img/server/a/Communitygroupbuying.png', action:goGroupBuying },
// 二手市场不用
 { id: '3', title: '二手市场', icon: './static/img/server/a/Secondhandmarket.png' },
{ id: '4', title: '房屋租售', icon: './static/img/server/a/Houserentalandsale.png',  }
]);


// 环保服务数据
const shi = ref([
  // { id: '1', title: '垃圾分类', icon: './static/img/indeximg/kjfs/TX.png', },
  // { id: '2', title: '绿色出行', icon: './static/img/indeximg/kjfs/TX.png' },
  // { id: '3', title: '节能建议', icon: './static/img/indeximg/kjfs/TX.png' },
  // { id: '4', title: '环保活动', icon: './static/img/indeximg/kjfs/TX.png' },
]);

// 最近使用的服务
const recentServices = ref([
  { id: '1', title: '闲置回收',  },


  { id: '2', title: '物业报修', }
]);

// 默认选中第一个（社区事务）
const selectedIndex = ref(0);

// 搜索输入
const searchInput = ref('');

// 根据选中的索引动态切换右侧内容
const currentItems = computed(() => {
  switch (selectedIndex.value) {
    case 0:
      return list.value; // 社区服务
    case 1:
      return qulist.value; // 物业服务
    case 2:
      return st.value; // 便民服务
    case 3:
      return [] // 政务服务
    case 4:
      return shi.value; // 环保服务
    default:
      return [];
  }
});

// 点击左侧项时触发
const selectItem = (index) => {
  selectedIndex.value = index;
};

// 点击服务项触发对应操作
const handleServiceClick = (item) => {
  if (item.action && typeof item.action === 'function') {
    item.action();
  }
};
</script>

<template>
  <view class="back">
    <view class="t">
      <view class="mian">
        <view class="hearde">
          <v-icon icon="mdi-magnify"></v-icon>
          <input type="text" v-model="searchInput" placeholder="搜索社区服务">
        </view>
        <v-icon icon="mdi-account-convert" class="icon"></v-icon>
      </view>
    </view>

    <!-- 最近使用 -->
    <view class="titil">
      <h4>最近使用</h4>
      <view class="text">
        <div v-for="(item, index) in recentServices" :key="index" 
             class="recent-item" @click="item.action && item.action()">
          <v-icon icon="mdi-history" class="recent-icon"></v-icon>
          <text>{{ item.title }}</text>
        </div>
      </view>
    </view>
    
    <!-- 主容器 -->
    <view class="container">
      <!-- 左侧列表 -->
      <view class="left-panel">
        <view
            v-for="(item, index) in menuItems"
            :key="index"
            class="left-item"
            :class="{ active: selectedIndex === index }"
            @click="selectItem(index)"
        >
          <img :src="item.icon" alt="" style="width: 20px; vertical-align: middle; margin-right: 8px;">
          {{ item.title }}
        </view>
      </view>

      <!-- 右侧内容 -->
      <view class="right-panel">
        <view v-if="selectedIndex !== null" class="right-content">
          <h3>{{ menuItems[selectedIndex].title }}</h3>
          <view class="box">
            <ul>
              <li v-for="(item, index) in currentItems" 
                  :key="index" 
                  @click="handleServiceClick(item)">
                <img :src="item.icon" alt="">
                <span>{{ item.title }}</span>
              </li>
              
              <!-- 如果当前分类的服务项少于4个，添加"更多服务"选项 -->
              <li v-if="currentItems.length < 4" class="more-services">
                <v-icon icon="mdi-dots-horizontal-circle-outline" class="more-icon"></v-icon>
                <span>更多服务</span>
              </li>
            </ul>
          </view>
        </view>
      </view>
    </view>
    
  </view>
  
  <nav_bottom who-active="社区"></nav_bottom>
</template>

<style scoped lang="scss">
@use "../../static/css/main.scss";

.back{
  @include main.useTheme() {
    // 容器样式
    .container {
      .right-panel::-webkit-scrollbar{
        display: none;
      }
      .right-panel {
        .right-content{
          h3 {
            font-size: 20px;
            color: main.getVal("primary_text_color");
          }
          .box{
            ul{
              li{
                img{
                  width: 40px;
                  height: 40px;
                }
                display: flex;
                align-items: center;
                margin-top: 10px;
                color: main.getVal("primary_text_color");
                cursor: pointer;
                padding: 10px;
                border-radius: 8px;
                transition: background-color 0.2s;
                
                &:hover {
                  background-color: main.getVal("hover_color");
                }
                
                &.more-services {
                  color: main.getVal("three_lv_text_color");
                  
                  .more-icon {
                    font-size: 28px;
                    color: main.getVal("pri_color");
                  }
                }
              }
              display: flex;
              align-items: center;
              justify-content: flex-start;
              flex-direction: column;
            }
            display: flex;
            align-items: center;
            height: 100%;
          }
        }
        min-width: 122px;
        height: 57vh;
        overflow: auto;
        flex: 1;
        padding: 16px;
        background-color: main.getVal("primary_bg_color");
        //height: 67vh;
      }

      .left-item.active {
        background-color: main.getVal("pri_color");
        color: main.getVal("primary_bg_color");
      }
      .left-panel::-webkit-scrollbar{
        display: none;
      }
      .left-panel {
        .left-item {
          &:hover {
            background-color: main.getVal("hover_color");
          }
          padding: 12px;
          cursor: pointer;
          border-radius: 4px;
          margin-bottom: 8px;
          transition: background-color 0.1s;
          display: flex;
          align-items: center;
          color: main.getVal("primary_text_color");
        }
        min-width: 122px;
        height: 57vh;
        overflow: auto;
        background-color: main.getVal("two_lv_bg_color");
        border-right: 1px solid main.getVal("border_color");
        padding: 6px;
      }
      display: flex;
      height: 56vh;
      overflow: hidden;
      background-color: main.getVal("two_lv_bg_color");
    }
    
    // 最近使用部分
    .titil {
      h4 {
        position: absolute;
        top: 12px;
        left: 12px;
        font-size: 18px;
        display: block;
        color: main.getVal("primary_text_color");
      }
      .text {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        color: main.getVal("three_lv_text_color");
        
        .recent-item {
          display: flex;
          align-items: center;
          background-color: main.getVal("two_lv_bg_color");
          padding: 8px 16px;
          border-radius: 20px;
          margin: 5px;
          cursor: pointer;
          transition: all 0.2s;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          }
          
          .recent-icon {
            margin-right: 6px;
            color: main.getVal("pri_color");
            font-size: 16px;
          }
          
          text {
            color: main.getVal("primary_text_color");
            font-size: 14px;
          }
        }
      }
      position: relative;
      width: 100%;
      height: 20vh;
      background-color: main.getVal("primary_bg_color");
      border-radius: 24px 24px 0 0;
      padding: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: -19px;
    }
    
    // 顶部搜索区域
    .t{
      .mian{
        .icon{
          width: 35px;
          margin-left: 15px;
          color: main.getVal("primary_bg_color");
        }
        .hearde{
          min-width: 332px;
          height: 30px;
          background: main.getVal("primary_bg_color");
          border-radius: 222px;
          display: flex;
          align-items: center;
          padding: 12px;
          
          input {
            color: main.getVal("primary_text_color");
            width: 100%;
            border: none;
            outline: none;
            background: transparent;
            
            &::placeholder {
              color: main.getVal("three_lv_text_color");
            }
          }
          
          v-icon {
            color: main.getVal("three_lv_text_color");
            margin-right: 8px;
          }
        }
        display: flex;
        margin-bottom: -25px;
      }
      width: 100%;
      height: 20VH;
      background-color: main.getVal("pri_color");
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    // 热门服务推荐
    .popular-services {
      width: 94%;
      margin: 15px auto;
      padding: 15px;
      background-color: main.getVal("primary_bg_color");
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      
      h4 {
        font-size: 16px;
        color: main.getVal("primary_text_color");
        margin-bottom: 12px;
      }
      
      .popular-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        
        .popular-item {
          width: 30%;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 12px;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.2s;
          
          &:hover {
            background-color: main.getVal("hover_color");
            transform: translateY(-2px);
          }
          
          .popular-icon {
            font-size: 28px;
            color: main.getVal("pri_color");
            margin-bottom: 8px;
          }
          
          span {
            font-size: 14px;
            color: main.getVal("primary_text_color");
          }
        }
      }
    }
    
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      list-style: none;
      text-decoration: none;
    }
    
    body {
      background: main.getVal("two_lv_bg_color");
    }
  }
}
</style>

